'use strict'
import { View } from '../../component'
import style from './css.css'
// import Hls from 'hls.js'
// const ua = navigator.userAgent.toLowerCase()
class Videos extends React.Component {
  static propTypes = {
    videos: PropTypes.array,
    dollImage: PropTypes.string,
    dollMusic: PropTypes.string,
    videosPos: PropTypes.number,
    changeVideoPos: PropTypes.func,
    getRef: PropTypes.func
  }
  videoMain = null
  videoSlide = null
  audio = null
  _videoTouchFix = this._videoTouchFix.bind(this)
  componentDidMount () {
    this.props.getRef([this.videoMain, this.videoSlide])
    this.videoMain.play()
    this.videoSlide.play()
    this.audio.play()

    setTimeout(() => {
      this.props.changeVideoPos([this.videoMain, this.videoSlide])
      window.Qapp.hideLoad()
    }, 1000)
    document.addEventListener('touchstart', this._videoTouchFix, false)
  }
  _videoTouchFix () {
    if (this.videoMain) {
      this.videoMain.play()
      this.audio.play()
      document.removeEventListener('touchstart', this._videoTouchFix)
    }
  }
  componentWillUnmount () {
    this.videoMain.pause()
    this.videoSlide.pause()
    this.videoMain = null
    this.videoSlide = null
    document.removeEventListener('touchstart', this._videoTouchFix)
  }
  render () {
    const { videosPos } = this.props
    return (
      <View className={style.videos} style={{ backgroundImage: `url(${this.props.dollImage})` }}>
        <video style={{ backgroundImage: `url(${this.props.dollImage})`, opacity: videosPos === 0 ? 1 : 0 }} ref={(res) => { this.videoMain = res }} className={style.video} src= { this.props.videos[1] } playsInline="true" autoPlay="autoPlay" webkit-playsinline="true" x5-video-player-type="h5"></video>
        <video style={{ backgroundImage: `url(${this.props.dollImage})`, opacity: videosPos === 1 ? 1 : 0 }} ref={(res) => { this.videoSlide = res }} className={style.video} src= { this.props.videos[0] } playsInline="true" autoPlay="autoPlay" webkit-playsinline="true" x5-video-player-type="h5" ></video>
        <audio className={ style.audio } ref={(res) => { this.audio = res }} autoPlay='autoplay' loop='loop' src={this.props.dollMusic } ></audio>
      </View>
    )
  }
}

export default Videos
